<%- include('layout/header', { title: '微博 - 注册', isNarrow: true })%>

<h1>注册</h1>
<% if (locals.isLogin) { %>
<p><%= locals.userName%> 您已成功登录，请直接访问<a href="/">首页</a></p>
<% } else { %>
<form>
  <div class="form-group">
    <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
    <small id="span-username-info" class="form-text text-muted"></small>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="input-password-repeat" placeholder="重新输入密码">
    <small id="span-password-repeat-info" class="form-text text-muted"></small>
  </div>
  <div class="form-group">
    <select class="form-control" id="select-gender">
      <option value="1">男</option>
      <option value="2">女</option>
      <option value="3">保密</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary" id="btn-submit">注册</button>
  &nbsp;
  <a href="/login">已有账号，返回登录>></a>
</form>

<script>
  $(function () {
    var $inputUserName = $('#input-username')
    var $spanUserNameInfo = $('#span-username-info')
    var $inputPassword = $('#input-password')
    var $inputPasswordRepeat = $('#input-password-repeat')
    var $spanPasswordRepeatInfo = $('#span-password-repeat-info')
    var $selectGender = $('#select-gender')
    var userNameTimeoutId
    var passwordTimeoutId
    var isPasswordSame = false // 默认两次密码不一致
    var isUserNameExist = true // 默认用户名已存在

    // 监听用户名输入
    $inputUserName.on('input', function () {
      // 做一个简单的防抖
      if (userNameTimeoutId) {
        clearTimeout(userNameTimeoutId)
      }
      userNameTimeoutId = setTimeout(function () {
        // 判断用户名是否已存在
        var userName = $inputUserName.val()
        ajax.post('/api/user/isExist', {
          userName
        }, function (err, data) {
          $spanUserNameInfo.show()
          if (err) {
            $spanUserNameInfo.text('用户名可用')
            isUserNameExist = false
          } else {
            $spanUserNameInfo.text('用户名已存在！')
            isUserNameExist = true
          }
        })
      }, 500)
    })

    // 监听验证密码输入
    $inputPasswordRepeat.on('input', function () {
      // 做一个简单的防抖
      if (passwordTimeoutId) {
        clearTimeout(passwordTimeoutId)
      }
      passwordTimeoutId = setTimeout(function () {
        var password = $inputPassword.val()
        var passwordRepeat = $inputPasswordRepeat.val()
        $spanPasswordRepeatInfo.show()
        if (password === passwordRepeat) {
          $spanPasswordRepeatInfo.text('两次密码一致')
          isPasswordSame = true
        } else {
          $spanPasswordRepeatInfo.text('两次密码不一致！')
          isPasswordSame = false
        }
      }, 500)
    })

    // 注册事件
    $('#btn-submit').click(function (e) {
      // 阻止默认的提交表单行为
      e.preventDefault()

      // 验证
      if (isUserNameExist) {
        alert('用户名已存在')
        return
      }
      if (!isPasswordSame) {
        alert('两次密码不一致')
        return
      }

      var userName = $inputUserName.val()
      var password = $inputPassword.val()
      var gender = parseInt($selectGender.val())

      // 提交数据
      ajax.post('/api/user/register', {
        userName,
        password,
        gender
      }, function (err, data) {
        if (err) {
          alert(err)
          return
        }
        alert('注册成功，请登录')
        location.href = '/login'
      })
    })
  })
</script>
<% } %>

<%- include('layout/footer')%>